<script lang="ts" setup>
import router from '@/router';
function clickHandler() {
    router.push('/todolist')
}
function clickHandler_el() {
    router.push('/todolist_el')
}

function gittee(){
    window.location.href='https://gitee.com/xiao-jinqiu/vue-project-assignment'
}
</script>


<template>
    <header>
        <el-container style="position: relative;">
            <el-header id="header" style="width: 100%;;left:0%; position:fixed;background-color: aqua">
                <el-menu ellipsis router class="el-menu-popper-demo" mode="horizontal" :popper-offset="16"
                    style="background-color: aqua">
                    <el-menu-item index="/home" style="margin-left: 10% ; ">
                        <!-- <router-link   to="/" > -->
                        首页
                        <!-- </router-link> -->
                    </el-menu-item>
                    <el-sub-menu index="2" style="margin-left: 13%;">
                        <template #title>项目列表</template>
                        <el-menu-item index="/todolist" >
                            待办列表
                        </el-menu-item>
                        <el-menu-item index="/todolist_el" >
                            待办列表(el)
                        </el-menu-item>
                        <el-menu-item index="/todolist_vant" >
                            待办列表(vant)
                        </el-menu-item>
                        <el-menu-item index="/autotodolist" >
                            待办列表(响应式)
                        </el-menu-item>
                        <el-menu-item index="/rewrite">
                            课程成绩页面
                        </el-menu-item>
                        <el-menu-item index="/rewrite2">
                           个人成绩页面
                        </el-menu-item>
                       
                      
                    </el-sub-menu>
                    <el-menu-item  style="margin-left: 13%;" @click="gittee()">
                        代码仓库</el-menu-item>
                    <el-menu-item index="/submit" style="margin-left: 13%;">
                        登录/注册
                    </el-menu-item>
                    <el-menu-item index="5" style="margin-left:13%;" disabled>Info</el-menu-item>
                </el-menu>
            </el-header>

            <el-container style="position: relative;top: 150px;left: 45%;margin-left: 20px;">
                <el-header></el-header>
                <h2>Welcome to My Vue!</h2>

                <h2>This My homepage</h2>
            </el-container>
            <el-container
                style="box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);padding: 20px;border-radius: 10px;position: relative;left: 45%;top:200px">
                <el-header>
                    <div>
                        <el-button @click="clickHandler()" style="width: 150px;">待办列表</el-button>
                        <el-button @click="clickHandler_el()"style="width: 150px;">待办列表(el)</el-button>
                    </div>
                    <div>
                        <el-button @click="router.push('/todolist_vant')"style="width: 150px;">待办列表(vant)</el-button>
                    </div>
                </el-header>
               
            </el-container>



        </el-container>
    </header>



</template>